<template>
  <div class="page-container">
    <!-- 快捷操作 -->
    <list-quick-navigation ref="listQuickNavigationRef" @change="quickNavigationChange" />
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />

    <table-index
      :table="table"
      :selectedKeys="selectedRowKeys"
      @loadData="loadData"
      @selection-change="selectionChange"
      @pagenationChange="pagenationChange"
    >
      <!-- 支出单审批配置 -->
      <template #table-summary>
        <div class="flex-content">
          <div class="checkSwitch">
            <span>支出单是否开启审批： {{ isCheck ? '开启' : '关闭' }}</span>
            <a-button v-permission="'svms:business:operateCost.setbtn'" type="primary" size="mini" @click="handleApproval">配置</a-button>
          </div>
          <div class="table-info">
            <span class="table-info-item">
              等待付款的金额：
              <span class="num">{{ countInfo?.waitPayAmount || 0 }}</span>
              元
            </span>
            <span class="num-line">|</span>
            <span class="table-info-item">
              待审批/审批中的金额：
              <span class="num">{{ countInfo?.checkAmount ? countInfo.checkAmount : 0 }}</span>
              元
            </span>
            <span class="num-line">|</span>
            <span class="table-info-item">
              已付款的金额：
              <span class="num">{{ countInfo?.payAmount || 0 }}</span>
              元
            </span>
          </div>
        </div>
      </template>
      <template #code="{ record }">
        <div class="order-info-item">
          <div>{{ record.code }}</div>
        </div>
        <!-- 订单标签 -->
        <a-space wrap>
          <tag type="primary" v-for="(item, index) in record.labelList" :key="index">{{ item }}</tag>
        </a-space>
      </template>
      <!-- 审批状态 -->
      <template #checkStatus="{ record }">
        <status-tag :value="record.checkStatus" :label="record.checkStatusName" type="operateCost" />
        <!-- <div :class="['checkStatus_' + record.checkStatus]">{{ record.checkStatusName }}</div> -->
        <!-- 驳回 -->
        <a-tag style="cursor: pointer" bordered color="blue" v-if="record.checkStatus == 6" @click="showReason(record)">原因</a-tag>
      </template>
      <!-- 审批流 -->
      <template #checkFlowList="{ record }">
        <!-- 无需审批显示- -->
        <div v-if="record.checkStatus == 1">-</div>
        <template v-else>
          <div v-for="(item, index) in record.checkFlowList" :key="index">
            <div v-if="item.staffId">
              <div class="item-content">
                <span class="fixed_width">
                  {{ item.staffName ? (item.staffName.length > 3 ? item.staffName.substr(0, 3) + '...' : item.staffName) : '-' }}
                </span>
                <a-tag
                  :color="getTagColor(item.statusName)"
                  style="margin-left: 4px"
                  v-if="item.statusName == '同意' || item.statusName == '已驳回' || item.statusName == '待审批'"
                >
                  {{ item.statusName }}
                </a-tag>
                <span :class="['checkStatus_' + item.status]" v-else>{{ item.statusName || '-' }}</span>
              </div>
              <div class="td-divider" v-if="index != record.checkFlowList.filter((i) => i.staffId).length - 1"></div>
            </div>
          </div>
        </template>
      </template>
      <!-- 关联业务信息 -->
      <template #orderInfo="{ record }">
        <div v-if="record.workCode">
          <div class="order-info-item"> {{ record.workTypeName || '-' }}</div>
          <a-link v-if="record.workCode" class="order-info-item a-link" @click="() => toWorkDetail(record)">
            {{ record.workCode }}
          </a-link>
        </div>

        <div class="td-divider" v-if="record.workCode && record.businessCode"></div>

        <div v-if="record.businessCode">
          <div class="order-info-item"> {{ record.businessTypeName || '-' }}</div>
          <a-link v-if="record.businessCode" class="order-info-item a-link" @click="() => toOrderDetail(record)">
            {{ record.businessCode }}
          </a-link>
        </div>
      </template>
      <!-- 客户信息 -->
      <template #memberInfo="{ record }">
        <div v-if="record.memberName || record.memberPhone">
          <div class="order-info-item"> {{ record.memberName }}</div>
          <div class="order-info-item"> {{ record.memberPhone }}</div>
        </div>
        <div v-else>-</div>
      </template>
      <!-- 付款状态 -->
      <template #payStatusName="{ record }">
        <status-tag :value="record.payStatus" :label="record.payStatusName" />
        <!-- <span :class="['payStatus_' + record.payStatus]">{{ record.payStatusName || '-' }}</span> -->
      </template>
      <!-- 支出费项 -->
      <template #feeList="{ record }">
        <template v-for="(item, index) in record.feeList" :key="index">
          {{ item.itemName }}
          <div class="td-divider" v-if="index != record.feeList.length - 1"></div>
        </template>
      </template>
      <!-- 费用金额 -->
      <template #feeAmount="{ record }">
        <div v-for="(item, index) in record.feeList" :key="index">
          <span> {{ item.amount }} </span>
          <div class="td-divider" v-if="index != record.feeList.length - 1"></div>
        </div>
      </template>
      <!-- 车辆信息 -->
      <template #carInfo="{ record }">
        <template v-for="(item, index) in record.feeList" :key="index">
          <div class="flex items-center">
            <div class="carLicenseNo">{{ item.carId ? `${item.licenseNo}` : '-' }}</div>
            <a-tooltip v-if="item.carId" :content="`${item.licenseNo} ${item.carModel}`" position="top" mini>
              <img src="@/assets/view-icon.png" class="carInfo_img" />
            </a-tooltip>
          </div>
          <div class="td-divider" v-if="index != record.feeList.length - 1"></div>
        </template>
      </template>
      <!-- 付款时间 -->
      <template #payTime="{ record }">
        <span>{{ record.payTime || '-' }}</span>
      </template>
      <!-- 收款方信息 -->
      <template #collectInfo="{ record }">
        <span v-if="record.costType == 1"> {{ record.collectStaffName }} {{ record.collectInExpWayName }} {{ record.collectCard }} </span>
        <template v-else>
          <span v-if="record.collectType == 2">
            {{ record.collectIndustryName }} {{ record.collectInExpWayName }} {{ record.collectCard }}
          </span>
          <span v-else>{{ record.collectSupplierName }} {{ record.collectInExpWayName }} {{ record.collectCard }}</span>
        </template>
      </template>
      <!-- 批量付款关联 -->
      <template #allPayInfo="{ record }">
        <!-- 判断是否为批量付款 -->
        <div v-if="record.batchPayCode">
          <!-- 批量付款勾选一个时 -->
          <p v-if="record.batchPayRefList.length == 1">-</p>
          <template v-else>
            <!-- 批量付款勾选大于三个时，展示气泡弹框 -->
            <template v-if="record.batchPayRefList && record.batchPayRefList.length > 3">
              <all-pay-popup :list="record.batchPayRefCodeList" :totalAmount="unitVal(record.batchPayAllAmount, '元')" />
            </template>
            <!-- 批量付款勾选小于等于三个时，不展示气泡弹框 -->
            <template v-else>
              <p v-for="(item, index) in record.batchPayRefList" :key="index">{{ item.code }}</p>
            </template>
          </template>
        </div>
        <span v-else>-</span>
      </template>
    </table-index>
  </div>
  <!-- 支出单是否开始审批弹框 -->
  <approval-settings-modal ref="approvalModalRef" @getApprovalSet="getApprovalSet" />
  <!-- 原因弹框 -->
  <ReasonModal ref="reasonModalRef" />
  <!-- 付款弹框 -->
  <confirm-fee-modal ref="confirmFeeModalRef" @feepageConfirm="feepageConfirm" />
  <!-- 批量付款弹框 -->
  <confirm-all-fee-modal ref="confirmAllFeeModalRef" @feepageConfirm="feepageConfirm" />
  <!-- 财务打款凭证弹框 -->
  <finance-remit-modal ref="financeRemitModalRef" @feepageConfirm="loadData()" />
</template>
<!-- todoList -->
<script setup name="OperateCostList">
  import { ref, reactive, onMounted, computed, onActivated } from 'vue'
  import { Modal, Message } from '@arco-design/web-vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { useExport } from '@/hooks/list'
  import { usePageDict } from '@/hooks/useDict'
  import { unitVal } from '@/utils'
  import {
    getCostListApi,
    exportExcel,
    revokeCostApi,
    nullifyCostApi,
    getListCountApi,
    checkApplyIfEqualApi,
  } from '@/api/business/operateCost'
  import listQuickNavigation from './components/list-quick-navigation.vue'
  import ReasonModal from './components/reason-modal.vue'
  import { getApprovalSetings } from '@/api/system/approvalSetings'
  import approvalSettingsModal from '../../system/general/approval-settings/approval-settings-modal.vue'
  import confirmFeeModal from './components/confirm-fee-modal.vue'
  import confirmAllFeeModal from './components/confirm-all-fee-modal.vue'
  import financeRemitModal from './components/finance-remit-modal.vue'
  import allPayPopup from './components/all-pay-popup.vue'
  import { getLoginUserInfo } from '@/api/user'
  import { usePermission } from '@/hooks/usePermission'
  import { useRoute } from 'vue-router'
  import { evalQueryParam } from '@/utils'

  const route = useRoute()
  const routeQuery = route.query

  import useNavigate from '@/hooks/useNavigate'
  const { navigateTo, navigateToCreate, registerListHotUpdate } = useNavigate()
  import { cloneDeep } from 'lodash-es'

  const dict = usePageDict('getCostEnums')
  // dateTime Attrs
  const dateTimeAttrs = {
    type: 'i-range-picker',
    attrs: {
      showTime: true,
      timePickerProps: {
        defaultValue: ['00:00:00', '23:59:59'],
      },
    },
  }
  // 支出单是否开启审批
  const isCheck = ref(false)
  const approvalModalRef = ref()
  const handleApproval = () => {
    approvalModalRef.value.open()
  }
  // 展示原因弹框
  const reasonModalRef = ref()
  const showReason = (record) => {
    reasonModalRef.value.open(record)
  }
  // 根据标签内容返回不同的颜色值
  const getTagColor = (label) => {
    const tagColors = {
      同意: 'green',
      待审批: 'orange',
      已驳回: 'red',
    }
    return tagColors[label] || ''
  }
  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '支出单号', prop: 'code', placeholder: '请输入', type: 'a-input' },
      { label: '关联单据类型', prop: 'refCostTypeList', type: 'a-select', options: dict.refCostTypeEnum, multiple: true },
      { label: '支出单类型', prop: 'costType', type: 'a-select', options: dict.costTypeEnum },
      { label: '工单号', prop: 'workCode', placeholder: '请输入', type: 'a-input' },
      { label: '工单类型', prop: 'workType', type: 'a-select', options: dict.workTypeEnum },
      { label: '业务单号', prop: 'businessCode', placeholder: '请输入', type: 'a-input' },
      { label: '业务类型', prop: 'businessType', type: 'a-select', options: dict.businessTypeEnum },
      { label: '客户信息', prop: 'memberInfoLike', placeholder: '请输入客户姓名/手机号', type: 'a-input' },
      { label: '支出单金额', prop: 'amount', placeholder: '请输入', type: 'a-input-number' },
      { label: '标签', prop: 'labelList', type: 'a-select', options: dict.labelEnum, multiple: true },
      { label: '审批状态', prop: 'checkStatusList', type: 'a-select', options: dict.checkStatusEnum, multiple: true },
      { label: '审批人', prop: 'checkStaffId', type: 'remote-select', attrs: { type: 'operate_staff_list' } },
      { label: '付款状态', prop: 'payStatusList', type: 'a-select', options: dict.payStatusEnum, multiple: true },
      {
        label: '费用产生门店',
        prop: 'feeOrgIdList',
        type: 'remote-select',
        attrs: {
          type: 'org_listByStaff_multiple',
          multiple: true,
          params: {
            oldIdList: oldIdList.value,
          },
        },
      },
      { label: '支出费项', prop: 'feeItem', type: 'sysdict-select', attrs: { code: 'cost_fee_item', addable: false } },
      { label: '申请人', prop: 'applyStaffId', type: 'remote-select', attrs: { type: 'operate_staff_list' } },
      { label: '收款方', prop: 'collectNameLike', placeholder: '请输入', type: 'a-input' },
      {
        label: '申请时间',
        prop: 'applyTimeArr',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.applyTimeStart = value[0]
          queryParam.applyTimeEnd = value[1]
        },
      },
      {
        label: '付款时间',
        prop: 'payTimeArr',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.payTimeStart = value[0]
          queryParam.payTimeEnd = value[1]
        },
      },
      {
        label: '费用发生日期',
        type: 'i-range-picker',
        prop: 'costFeeCreateTime',
        change: (value = []) => {
          queryParam.costFeeCreateTimeBegin = value[0]
          queryParam.costFeeCreateTimeEnd = value[1]
        },
      },
    ]
  })

  // 撤回
  const cancelOrderFn = (record) => {
    revokeCostApi({
      id: record.id,
    }).then(() => {
      loadData()
      Message.success(`已撤回`)
    })
  }

  // 作废订单
  const invalidOrderFn = (record) => {
    nullifyCostApi({
      id: record.id,
    }).then(() => {
      loadData()
      Message.success(`已作废`)
    })
  }

  const defaultQueryParam = {
    // 申请时间
    applyTimeArr: [],
    // 付款时间
    payTimeArr: [],
  }
  // 定义 queryParam
  const queryParam = reactive({
    ...cloneDeep(defaultQueryParam),
  })

  // 快捷导航点击事件
  const quickNavigationChange = (param) => {
    // 清空
    for (var k in queryParam) {
      queryParam[k] = undefined
    }
    // 更新数据
    let newParam = {
      ...cloneDeep(defaultQueryParam),
      ...param,
    }
    for (var k in newParam) {
      queryParam[k] = newParam[k]
    }
    loadData(1, 'quickNavigation')
  }

  const confirmFeeModalRef = ref()
  // 财务打款凭证
  const financeRemitModalRef = ref()

  // 判断是否为员工还是admin，admin不支持新增报销单和付款单
  const isStaff = ref(true)
  const buttons = computed(() => {
    return [
      {
        label: '导出',
        permission: 'svms:business:operateCost.export',
        method: () => {
          useExport(exportExcel, queryParam)
        },
      },
      {
        type: 'primary',
        label: '批量付款',
        permission: 'svms:business:operateCost.confirmAllFee',
        method: () => {
          confirmAllFee()
        },
      },
      {
        type: 'primary',
        icon: 'plus',
        label: '新增报销单',
        show: isStaff,
        permission: 'svms:business:operateCost.applyForm.create',
        method: () => {
          navigateToCreate(`/operate-cost/create-apply?ifOpenCheck=${isCheck.value}&page=operateCost`, '新增报销单')
        },
      },

      {
        type: 'primary',
        icon: 'plus',
        label: '新增付款单',
        show: isStaff,
        permission: 'svms:business:operateCost.payForm.create',
        method: () => {
          navigateToCreate(`/operate-cost/create-pay?ifOpenCheck=${isCheck.value}&page=operateCost`, '新增付款单')
        },
      },
    ]
  })

  const operates = computed(() => {
    return [
      {
        label: '详情',
        permission: 'svms:business:operateCost.detail',
        method: (record) => {
          navigateTo(`/operate-cost/detail/${record.id}`, `${record.code}-支出单详情`)
        },
      },
      {
        // 修改去掉相关权限，只允许admin修改
        label: '修改',
        show: (record) => record.ifEdit,
        method: (record) => {
          if (record.costType == 1) {
            navigateTo(`/operate-cost/edit-apply/${record.id}`, `${record.code}-修改报销单`)
          } else {
            navigateTo(`/operate-cost/edit-pay/${record.id}`, `${record.code}-修改付款单`)
          }
        },
      },
      {
        label: '财务打款凭证',
        show: (record) => record.payStatus == 1,
        permission: 'svms:business:operateCost.financeRemit',
        method: (record) => {
          financeRemitModalRef.value.open(record)
        },
      },
      {
        label: '撤回',
        permission: 'svms:business:operateCost.cancel',
        show: (record) => record.ifRevoke,
        method: (record) => {
          Modal.confirm({
            title: '提示',
            content: '请确认是否要撤回申请？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
              cancelOrderFn(record)
            },
          })
        },
      },
      {
        label: '审批',
        permission: 'svms:business:operateCost.check',
        show: (record) => record.ifCheck,
        method: (record) => {
          navigateTo(`/operate-cost/check-info/${record.id}?type=checkType`, `${record.code}-审批`)
        },
      },

      {
        label: '重新申请',
        permission: 'svms:business:operateCost.againapply',
        show: (record) => record.ifAgain,
        method: (record) => {
          if (record.costType == 1) {
            navigateTo(`/operate-cost/again-apply/${record.id}?type=againType&ifOpenCheck=${isCheck.value}`, `${record.code}-重新申请`)
          } else {
            navigateTo(`/operate-cost/again-pay/${record.id}?type=againType&ifOpenCheck=${isCheck.value}`, `${record.code}-重新申请`)
          }
        },
      },
      {
        label: '付款',
        permission: 'svms:business:operateCost.confirmfee',
        show: (record) => record.ifPay,
        method: (record) => {
          confirmFeeModalRef.value.show(record)
        },
      },
      {
        label: '作废',
        permission: 'svms:business:operateCost.invalidorder',
        show: (record) => record.ifNullify,
        method: (record) => {
          Modal.confirm({
            title: '提示',
            content: '请再次确认是否要作废申请？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
              invalidOrderFn(record)
            },
          })
        },
      },
    ]
  })
  const rowSelection = computed(() => {
    return usePermission('svms:business:operateCost.confirmAllFee')
      ? {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: true,
        }
      : false
  })
  // table 配置
  const table = useTable({
    columns: [
      { title: '支出单号', slotName: 'code', width: 180, fixed: 'left' },
      { title: '费用产生门店', dataIndex: 'feeOrgName', ellipsis: true },
      { title: '支出总额', dataIndex: 'amount', unit: '元', width: 120 },
      { title: '支出费项', slotName: 'feeList', width: 120 },
      { title: '费用金额', slotName: 'feeAmount', unit: '元', width: 120 },
      { title: '车辆信息', slotName: 'carInfo', width: 140 },
      { title: '收款方信息', slotName: 'collectInfo', width: 220 },
      { title: '申请人', dataIndex: 'applyStaffName', width: 120 },
      { title: '付款状态', slotName: 'payStatusName', width: 100 },
      { title: '审批状态', slotName: 'checkStatus', width: 100 },
      { title: '审批流', slotName: 'checkFlowList', width: 140 },
      { title: '关联单据类型', dataIndex: 'refCostTypeName', width: 130 },
      { title: '支出单类型', dataIndex: 'costTypeName', width: 110 },
      { title: '关联业务信息', slotName: 'orderInfo', width: 240 },
      { title: '客户信息', slotName: 'memberInfo', width: 180 },
      { title: '申请时间', dataIndex: 'applyTime', width: 180 },
      { title: '批量付款关联', slotName: 'allPayInfo', width: 200 },
      { title: '付款时间', dataIndex: 'payTime', width: 180 },
      { title: '申请备注', dataIndex: 'remark', ellipsis: true },
    ],
    bordered: {
      wrapper: true,
      cell: true,
    },
    tableLoading: false,
    operates: operates.value,
    buttons: buttons.value,
    rowSelection: rowSelection.value,
  })
  // 付款金额查询
  const countInfo = ref({})
  const getListCount = () => {
    getListCountApi(queryParam).then((res) => {
      countInfo.value = res.result
    })
  }

  // 列表接口调用
  const listQuickNavigationRef = ref()
  const loadData = (page, type) => {
    const fn = useFetchTableDataApi(table, queryParam, getCostListApi)
    fn(page).then((res) => {
      // 过滤掉审批流程没有审批人的
      res.data &&
        res.data.forEach((item) => {
          item.checkFlowList = item.checkFlowList && item.checkFlowList.filter((item) => item.staffId)
          // 批量付款关联支出单号
          item.batchPayRefCodeList = item?.batchPayRefList?.map((i) => i.code)
        })
      selectedRowKeys.value = []
      getListCount()
    })
    // before 刷新顶部快捷筛选数据、list-searcher刷新重置 重置快捷筛选
    if (type == 'reset' || type == 'submit') {
      listQuickNavigationRef.value.reset()
    }
    listQuickNavigationRef.value.getStNum()
    // end
  }
  const setQuickNavigation = () => {
    if (routeQuery.tag) {
      queryParam.labelList = []
      if (routeQuery.tag == 1) {
        queryParam.labelList.push(1)
        listQuickNavigationRef.value.clickActive('waitMeProcessingCount')
      }
      if (routeQuery.tag == 2) {
        queryParam.labelList.push(2)
        queryParam.checkStatusList = [1, 4]
        listQuickNavigationRef.value.clickActive('waitPayCount')
      }
    }
    if (routeQuery.code) {
      queryParam.code = routeQuery.code
    }
  }
  const selectedRowKeys = ref([])
  const selectionChange = (e) => {
    selectedRowKeys.value = e
  }
  // 页数选择后清空 复选框
  const pagenationChange = () => {
    selectedRowKeys.value = []
  }
  // 批量付款
  const confirmAllFeeModalRef = ref()
  const confirmAllFee = () => {
    if (selectedRowKeys.value.length) {
      checkApplyIfEqualApi({
        idList: selectedRowKeys.value,
      })
        .then(() => {
          confirmAllFeeModalRef.value.show(selectedRowKeys.value)
        })
        .catch((err) => {
          console.log(err)
        })
    } else {
      Message.warning('请勾选【等待付款】的支出单，再进行批量付款的操作')
    }
  }
  // 跳转工单详情
  const toWorkDetail = (val) => {
    if (usePermission('svms:business:workOrder:work.details')) {
      navigateTo(
        `/work-order/detail/${val.workId}?tab=1&orderId=${val.businessId}&workCode=${val.workCode}&orderType=${val.businessType}`,
        `${val.workCode}-工单详情`
      )
    }
  }
  // 跳转业务单详情
  const toOrderDetail = (val) => {
    if (val.businessType == '1') {
      if (usePermission('svms:order:short-order.detail')) {
        navigateTo(`/short-order/detail/${val.businessId}`, `${val.businessCode}-短租详情`)
      }
    } else {
      if (usePermission('svms:order:long-order.detail')) {
        navigateTo(`/long-order/detail/${val.businessId}`, `${val.businessCode}-长租详情`)
      }
    }
  }
  const getApprovalSet = () => {
    getApprovalSetings({
      type: 1,
    }).then((res) => {
      if (res.code == 200) {
        isCheck.value = res.result.ifOpen
      }
    })
  }
  // 获取用户登录信息
  const getUserInfo = () => {
    getLoginUserInfo({}).then((res) => {
      if (res.code == 200) {
        const data = res.result
        isStaff.value = data && data.id ? true : false
      }
    })
  }

  const feepageConfirm = () => {
    loadData()
    selectedRowKeys.value = []
  }

  const oldIdList = ref(null)
  onMounted(() => {
    // 支出单类型
    if (routeQuery.costType) {
      queryParam.costType = evalQueryParam(routeQuery.costType)
    }
    // 审批状态
    if (routeQuery.checkStatusList) {
      let checkStatusList = evalQueryParam(routeQuery.checkStatusList)
      queryParam.checkStatusList = checkStatusList
    }
    // 付款状态
    if (routeQuery.payStatusList) {
      let payStatusList = evalQueryParam(routeQuery.payStatusList)
      queryParam.payStatusList = payStatusList
    }
    // 费用发生日期
    if (routeQuery.startTime && routeQuery.endTime) {
      queryParam.costFeeCreateTimeBegin = routeQuery.startTime
      queryParam.costFeeCreateTimeEnd = routeQuery.endTime
      queryParam.costFeeCreateTime = [queryParam.costFeeCreateTimeBegin, queryParam.costFeeCreateTimeEnd]
    }
    // 费用产生机构
    if (routeQuery.orgIdList) {
      let feeOrgIdList = evalQueryParam(routeQuery.orgIdList)
      queryParam.feeOrgIdList = feeOrgIdList
      oldIdList.value = feeOrgIdList
    }
    getUserInfo()
    getApprovalSet()
    setQuickNavigation()
    loadData(1)
    // 注册热更新
    registerListHotUpdate(loadData)
  })
</script>

<style lang="less" scoped>
  .checkStatus {
    &_1 {
      color: #722ed1;
    }
    &_2 {
      color: #ff7d00;
    }
    &_3 {
      color: #1890ff;
    }
    &_4 {
      color: #00b42a;
    }
    &_5 {
      color: #86909c;
    }
    &_6 {
      color: #f76964;
    }
    &_7 {
      color: #f76964;
    }
  }
  .payStatus {
    &_0 {
      color: #ff7d00;
    }
    &_1 {
      color: #00b42a;
    }
  }
  .table-info {
    margin-top: 10px;
  }
  .num {
    color: #1890ff;
  }
  .num-line {
    margin: 0 15px;
  }
  .a-link {
    color: rgba(24, 144, 255, 1);
  }
  .padding-top-0 {
    padding-top: 0;
  }
  .padding-bottom-0 {
    padding-bottom: 0;
  }
  .border-none {
    &::before {
      content: none !important;
    }
  }
  .checkSwitch {
    span {
      margin-right: 10px;
    }
  }
  .order-info-item + .order-info-item {
    margin-top: 4px;
  }
  .item-content {
    display: flex;
    align-items: center;
  }
  .staff-line {
    margin: 0 5px;
  }
  .staffText {
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fixed_width {
    min-width: 30px;
    display: inline-block;
  }
  .carLicenseNo {
    // max-width: 70px;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }
  .carInfo_img {
    height: 16px;
    width: 16px;
    margin: 2px;
  }
</style>
